<template>
  <div class="content">
    <div class="head">
      <div class="nav">
        <van-nav-bar title="附近的人" left-text="返回" left-arrow />
      </div>
      <div class="menu">
        <van-dropdown-menu active-color="#1989fa" title="范围选择">
          <van-dropdown-item
            v-model="range_choise_num"
            :options="[
        { text: '范围选择: 1公里', value: 1 },
        { text: '范围选择: 100公里', value: 100 },
      ]"
          />
        </van-dropdown-menu>
      </div>
    </div>

    <div class="items">
      <div
        v-show="item.info.id != userId"
        class="item van-hairline--surround"
        v-for="item in people_near.data"
        :key="item.info.id"
      >
        <van-swipe-cell>
          <van-card :title="item.info.nickName" @click="toChatingView(item.userId)">
            <template #desc>
              <div class="tag">
                <van-tag
                  color="#ffe1e1"
                  text-color="#ad0000"
                  size="large"
                >{{(item.info.sex == '0' ? '男' : '女')}}</van-tag>
                <van-tag
                  color="#7232dd"
                  size="large"
                  style="margin-left: 10px;"
                >距离:{{item.distance + 'km'}}</van-tag>
              </div>
            </template>
            <template #thumb>
              <van-badge>
                <div class="child">
                  <img :src="item.info.faceImage" />
                </div>
              </van-badge>
            </template>
          </van-card>

          <template #right>
            <van-button square text="申请" type="success" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
    </div>

    <div class="load_address_view">
      <van-action-sheet
        v-model:show="load_address.display"
        title="我的位置"
        :closeable="false"
        :close-on-click-overlay="false"
      >
        <div class="view">
          <van-loading
            v-if="load_address.loading"
            text-color="#0094ff"
            size="50px"
            vertical
            style="margin-top:20vh"
          >正在载入地址</van-loading>

          <div v-else class="text">
            <van-empty image="error" v-if="load_address.error" description="获取失败">
              <van-button round type="danger" class="bottom-button" @click="get_position">重试</van-button>
            </van-empty>
            <van-empty
              image="https://www.hualigs.cn/image/60a109f19c09c.jpg"
              v-else
              :description="load_address.city"
            >
              <van-button round type="primary" class="bottom-button" @click="add_my_position">确定</van-button>
            </van-empty>
          </div>
        </div>
      </van-action-sheet>
    </div>
    <div id="allmap"></div>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import { addPeopleNear, findByDistance } from '@/api/requests/base';
import { getUserId } from '@/utils/app';
import { Notify } from "vant";

export default {
  setup () {
    const userId = getUserId()
    const range_choise_num = ref(1)
    const load_address = reactive({
      display: true,
      city: '北京市',
      lng: 0,
      lat: 0,
      error: false,
      loading: true,
    })
    const get_position = () => {
      load_address.loading = true
      var map = new BMap.Map("allmap");
      var point = new BMap.Point(116.331398, 39.897445);
      map.centerAndZoom(point, 12);

      var geolocation = new BMap.Geolocation();
      // 开启SDK辅助定位
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
          load_address.city = r.address.city
          load_address.lng = r.point.lng
          load_address.lat = r.point.lat
          load_address.error = false
        }
        else {
          load_address.error = true
        }
        load_address.loading = false
      });
    }

    const add_my_position = () => {

      addPeopleNear({
        city: load_address.city,
        lng: load_address.lng,
        lat: load_address.lat
      }).then(res => {
        console.log(1);
        Notify({ type: 'success', message: '您的位置已共享至服务器' })
        load_address.display = false
        people_near.get()
      })


    }

    const people_near = reactive({
      data: [],
      get: () => {
        findByDistance({
          city: load_address.city,
          distance: range_choise_num.value == 1 ? 1 : 100,
          count: 50
        }).then(res => {
          people_near.data = res.data
        })
      }
    })


    onMounted(() => {
      get_position()
    })

    return {
      userId,
      get_position,
      range_choise_num,
      load_address,
      add_my_position,
      people_near,

    }
  },

}
</script>




<style lang="less">
.content {
  height: 100vh;

  .items {
    .item {
      height: 60px;
      margin-bottom: 10px;
    }

    .van-card {
      height: 45px;
    }
    .van-tag {
      margin-top: 7px;
    }
    .van-swipe-cell {
      height: 54px;
      .van-badge__wrapper {
        position: absolute;
        left: 36px;
      }
      .van-button {
        height: 54px;
      }
    }
  }
}

.load_address_view {
  padding: 16px 16px 160px;
  .van-popup {
    height: 67vh;
  }
  .view {
    height: 40vh;
    .bottom-button {
      width: 160px;
      height: 40px;
    }
  }
}
</style>
